<template>
  <div class="dataset-score-container p-6">
    <!-- 头部总览信息 -->
    <div class="overview-section bg-white rounded-lg shadow p-6 mb-6">
      <h1 class="text-2xl font-bold mb-4">{{ datasetName }}</h1>
      <div class="grid grid-cols-3 gap-4">
        <div class="stat-card p-4 bg-blue-50 rounded-lg">
          <div class="text-lg font-semibold text-gray-700">总评分</div>
          <div class="text-3xl font-bold text-blue-600">{{ totalScore }}%</div>
        </div>
        <div class="stat-card p-4 bg-green-50 rounded-lg">
          <div class="text-lg font-semibold text-gray-700">评分时间</div>
          <div class="text-xl font-medium text-green-600">{{ scoreTime }}</div>
        </div>
        <div class="stat-card p-4 bg-purple-50 rounded-lg">
          <div class="text-lg font-semibold text-gray-700">数据集ID</div>
          <div class="text-3xl font-bold text-purple-600">{{ datasetId }}</div>
        </div>
      </div>
    </div>

    <!-- 一级指标卡片 -->
    <div class="level-one-scores grid grid-cols-2 gap-6">
      <div v-for="score in levelOneScores" :key="score.id" 
           class="score-card bg-white rounded-lg shadow overflow-hidden">
        <div class="card-header bg-gray-50 p-4 border-b">
          <div class="flex justify-between items-center">
            <h2 class="text-xl font-bold text-gray-800">{{ score.name }}</h2>
            <div class="score-badge px-3 py-1 rounded-full"
                 :class="getScoreClass(score.weightedScore)">
              {{ (score.weightedScore * 100).toFixed(2) }}分
            </div>
          </div>
          <p class="text-sm text-gray-600 mt-1">{{ score.description }}</p>
        </div>
        
        <!-- 二级指标 -->
        <div class="p-4">
          <div v-for="level2 in score.children" :key="level2.id" class="mb-6">
            <div class="flex justify-between items-center mb-2">
              <h3 class="text-lg font-semibold text-gray-700">{{ level2.name }}</h3>
              <span class="text-sm font-medium text-gray-500">
                权重: {{ level2.weight * 100 }}%
              </span>
            </div>
            
            <!-- 三级指标 -->
            <div class="space-y-3">
              <div v-for="level3 in level2.children" :key="level3.id"
                   class="indicator-item bg-gray-50 p-3 rounded">
                <div class="flex justify-between items-center">
                  <div>
                    <div class="font-medium text-gray-800">{{ level3.name }}</div>
                    <div class="text-sm text-gray-600">{{ level3.description }}</div>
                  </div>
                  <div class="score-info text-right">
                    <div class="font-bold" :class="getScoreTextClass(level3.score)">
                      {{ level3.score }}分
                    </div>
                    <div class="text-xs text-gray-500">
                      {{ level3.scoringMethod }}
                    </div>
                  </div>
                </div>
                <div class="mt-2 text-sm text-gray-600">
                  {{ level3.comment }}
                </div>
                <!-- 进度条 -->
                <div class="w-full bg-gray-200 rounded h-2 mt-2">
                  <div class="h-2 rounded" 
                       :class="getProgressClass(level3.score)"
                       :style="{ width: level3.score + '%' }">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DatasetScoreViz',
  data() {
    return {
      datasetId: 1,
      datasetName: 'Chinese-Text-Classification-Dataset',
      totalScore: 0.12,
      scoreTime: '2024-01-01 10:00:00',
      levelOneScores: [] // 将从API获取的数据存储在这里
    }
  },
  methods: {
    // 根据得分返回对应的样式类名
    getScoreClass(score) {
      const percentage = score * 100;
      if (percentage >= 90) return 'bg-green-100 text-green-800';
      if (percentage >= 80) return 'bg-blue-100 text-blue-800';
      if (percentage >= 70) return 'bg-yellow-100 text-yellow-800';
      return 'bg-red-100 text-red-800';
    },
    // 获取得分文字颜色
    getScoreTextClass(score) {
      if (score >= 90) return 'text-green-600';
      if (score >= 80) return 'text-blue-600';
      if (score >= 70) return 'text-yellow-600';
      return 'text-red-600';
    },
    // 获取进度条颜色
    getProgressClass(score) {
      if (score >= 90) return 'bg-green-500';
      if (score >= 80) return 'bg-blue-500';
      if (score >= 70) return 'bg-yellow-500';
      return 'bg-red-500';
    },
    // 从API获取数据
    async fetchData() {
      try {
        // 模拟API调用，实际使用时替换为真实的API调用
        const response = {
  "code": 200,
  "message": "成功",
  "data": {
    "datasetId": 1,
    "datasetName": "Chinese-Text-Classification-Dataset",
    "totalScore": 0.12,
    "scoreTime": "2024-01-01 10:00:00",
    "levelOneScores": [
      {
        "id": 1,
        "name": "合规属性",
        "description": "数据符合法律法规、规章制度和各类标准的程度",
        "weight": 0.15,
        "weightedScore": 0.16875,
        "children": [
          {
            "id": 5,
            "name": "规范性",
            "description": "合规属性的子项，评估数据集的合规规范性",
            "weight": 0.09,
            "weightedScore": 0.1215,
            "children": [
              {
                "id": 17,
                "name": "法律法规",
                "description": "数据集符合国家安全、个人隐私、商业机密等相关法律法规的度量",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.0405,
                "scoringMethod": "01法",
                "scoringStandard": "有法律依据1分，若无0分",
                "comment": "数据集完全符合相关法律法规要求"
              },
              {
                "id": 18,
                "name": "数据授权",
                "description": "数据集使用中是否获得授权与许可",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.0405,
                "scoringMethod": "01法",
                "scoringStandard": "获得授权许可1分，如无0分",
                "comment": "已获得完整的数据使用授权"
              },
              {
                "id": 19,
                "name": "数据伦理",
                "description": "数据集是否包含歧视或者偏见信息",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.0405,
                "scoringMethod": "01法",
                "scoringStandard": "不包含歧视信息或者偏见信息1分，若有0分",
                "comment": "数据集不包含任何歧视或偏见信息"
              }
            ]
          },
          {
            "id": 6,
            "name": "安全性",
            "description": "合规属性的子项，评估数据集的安全性",
            "weight": 0.06,
            "weightedScore": 0.04725,
            "children": [
              {
                "id": 20,
                "name": "安全制度",
                "description": "数据符合隐私保护、风险评估、安全控制等相关制度的度量",
                "weight": 0.03,
                "score": 90,
                "weightedScore": 0.0243,
                "scoringMethod": "专家打分法",
                "scoringStandard": "专家依据经验对是否符合数据安全制度进行打分",
                "comment": "安全制度执行情况良好，需要细化部分流程"
              },
              {
                "id": 21,
                "name": "安全控制",
                "description": "数据加密、数据备份、访问控制等安全控制技术的采用",
                "weight": 0.03,
                "score": 85,
                "weightedScore": 0.02295,
                "scoringMethod": "专家打分法",
                "scoringStandard": "专家依据经验对是否采用安全控制进行打分",
                "comment": "已实施基本的安全控制措施，部分高级特性待完善"
              }
            ]
          }
        ]
      },
      {
        "id": 2,
        "name": "内容属性",
        "description": "数据记录所呈现的信息存在错误或异常的程度",
        "weight": 0.35,
        "weightedScore": 1.24775,
        "children": [
          {
            "id": 7,
            "name": "准确性",
            "description": "内容属性的子项，评估数据内容的准确程度",
            "weight": 0.15,
            "weightedScore": 0.748125,
            "children": [
              {
                "id": 22,
                "name": "数据内容",
                "description": "数据内容是否符合预期",
                "weight": 0.05,
                "score": 85,
                "weightedScore": 0.223125,
                "scoringMethod": "标杆法",
                "scoringStandard": "内容维度层面计算下相似度阈值",
                "comment": "数据内容整体符合预期，个别字段存在偏差"
              },
              {
                "id": 23,
                "name": "数据格式",
                "description": "数据格式是否符合规范要求",
                "weight": 0.05,
                "score": 100,
                "weightedScore": 0.2625,
                "scoringMethod": "01法",
                "scoringStandard": "数据集格式符合自定义规范1分，若无0分",
                "comment": "数据格式完全符合规范要求"
              },
              {
                "id": 24,
                "name": "数据来源",
                "description": "数据来源的权威程度",
                "weight": 0.05,
                "score": 100,
                "weightedScore": 0.2625,
                "scoringMethod": "01法",
                "scoringStandard": "数据为一手数据或者官方数据1分，若无0分",
                "comment": "数据来源为官方渠道"
              }
            ]
          },
          {
            "id": 8,
            "name": "一致性",
            "description": "内容属性的子项，评估数据在存储、格式等方面的一致性",
            "weight": 0.05,
            "weightedScore": 0.0854,
            "children": [
              {
                "id": 25,
                "name": "格式一致性",
                "description": "数据集在存储和传输中格式是否保持一致",
                "weight": 0.02,
                "score": 100,
                "weightedScore": 0.035,
                "scoringMethod": "01法",
                "scoringStandard": "数据格式过程中保持一致1分，若无0分",
                "comment": "数据格式保持一致"
              },
              {
                "id": 26,
                "name": "标注一致性",
                "description": "数据是否保持多位标注者标注一致",
                "weight": 0.01,
                "score": 88,
                "weightedScore": 0.0154,
                "scoringMethod": "标杆法",
                "scoringStandard": "计算Fleiss Kappa系数",
                "comment": "Fleiss Kappa系数为0.88，标注一致性良好"
              },
              {
                "id": 27,
                "name": "语义一致性",
                "description": "数据的定义或内涵在不同阶段和系统中是否保持一致",
                "weight": 0.02,
                "score": 100,
                "weightedScore": 0.035,
                "scoringMethod": "01法",
                "scoringStandard": "提供统一的数据定义与数据编码1分，模糊定义或者错误定义0分",
                "comment": "提供了统一的数据定义文档"
              }
            ]
          },
          {
            "id": 9,
            "name": "时效性",
            "description": "内容属性的子项，评估数据更新的及时性",
            "weight": 0.05,
            "weightedScore": 0.077875,
            "children": [
              {
                "id": 28,
                "name": "数据延迟",
                "description": "数据被刷新或者更新的延迟时间",
                "weight": 0.02,
                "score": 80,
                "weightedScore": 0.028,
                "scoringMethod": "5分法",
                "scoringStandard": "数据延迟 = 数据查询时间点 - 数据最后更新时间点",
                "comment": "数据更新延迟在可接受范围内"
              },
              {
                "id": 29,
                "name": "数据更新频率",
                "description": "一段时间内的数据实际更新次数",
                "weight": 0.01,
                "score": 85,
                "weightedScore": 0.014875,
                "scoringMethod": "5分法",
                "scoringStandard": "数据资源最近更新日期与数据信息采集日期之间的天数之差",
                "comment": "更新频率符合业务需求"
              },
              {
                "id": 30,
                "name": "数据有效期",
                "description": "数据生成后是否保持在有效的时间范围内",
                "weight": 0.02,
                "score": 100,
                "weightedScore": 0.035,
                "scoringMethod": "01法",
                "scoringStandard": "根据业务需求和数据特点，设定数据的有效期阈值，检查数据是否在有效期内",
                "comment": "所有数据都在有效期内"
              }
            ]
          },
          {
            "id": 10,
            "name": "完整性",
            "description": "内容属性的子项，评估数据集的完整程度",
            "weight": 0.1,
            "weightedScore": 0.33635,
            "children": [
              {
                "id": 31,
                "name": "数据空值率",
                "description": "数据集是否存在空值",
                "weight": 0.03,
                "score": 92,
                "weightedScore": 0.0966,
                "scoringMethod": "标杆法",
                "scoringStandard": "数据空值率 = (缺失或为空的记录数 / 总记录数) × 100%",
                "comment": "数据空值率为8%，在可接受范围内"
              },
              {
                "id": 32,
                "name": "数据重复率",
                "description": "数据集是否存在重复数据",
                "weight": 0.03,
                "score": 95,
                "weightedScore": 0.09975,
                "scoringMethod": "标杆法",
                "scoringStandard": "数据重复率 = (重复值数量 / 总数据量) × 100%",
                "comment": "数据重复率为5%，符合预期"
              },
              {
                "id": 33,
                "name": "字段完整性",
                "description": "数据集中各个字段是否都被正确赋值，没有遗漏",
                "weight": 0.02,
                "score": 100,
                "weightedScore": 0.07,
                "scoringMethod": "01法",
                "scoringStandard": "数据集中的字段都被正确赋值1分，若无0分",
                "comment": "所有字段均被正确赋值"
              },
              {
                "id": 34,
                "name": "记录完整性",
                "description": "数据集中每条记录是否都包含所有必要的字段",
                "weight": 0.02,
                "score": 100,
                "weightedScore": 0.07,
                "scoringMethod": "01法",
                "scoringStandard": "数据集中每条记录都包含必要字段1分，若无0分",
                "comment": "所有记录包含必要字段"
              }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "规模属性",
        "description": "数据的质量会随着关联数据的规模增加而增加",
        "weight": 0.25,
        "weightedScore": 0.50315,
        "children": [
          {
            "id": 11,
            "name": "数量级",
            "description": "规模属性的子项，评估数据集的总体数量级",
            "weight": 0.1,
            "weightedScore": 0.21875,
            "children": [
              {
                "id": 35,
                "name": "数据总量",
                "description": "数据集是否包含了大量的数据点或者数据记录",
                "weight": 0.05,
                "score": 85,
                "weightedScore": 0.10625,
                "scoringMethod": "标杆法",
                "scoringStandard": "数据集占据硬盘空间的大小",
                "comment": "数据量达到业务需求标准"
              },
              {
                "id": 36,
                "name": "数据增长趋势",
                "description": "数据的产生与更新速度",
                "weight": 0.05,
                "score": 90,
                "weightedScore": 0.1125,
                "scoringMethod": "标杆法",
                "scoringStandard": "增长速度=一定时间间隔内的增长数量/总数量*100%",
                "comment": "数据增长趋势稳定"
              }
            ]
          },
          {
            "id": 12,
            "name": "多样性",
            "description": "规模属性的子项，评估数据的多样性",
            "weight": 0.09,
            "weightedScore": 0.1944,
            "children": [
              {
                "id": 37,
                "name": "数据类型",
                "description": "数据是否为多模态数据",
                "weight": 0.06,
                "score": 100,
                "weightedScore": 0.135,
                "scoringMethod": "01法",
                "scoringStandard": "数据种类多元化1分，若无不是0分",
                "comment": "包含多种数据类型"
              },
              {
                "id": 38,
                "name": "数据分布",
                "description": "数据在是否分布在不同值或者类别上",
                "weight": 0.03,
                "score": 88,
                "weightedScore": 0.0594,
                "scoringMethod": "标杆法",
                "scoringStandard": "分布一致性的常用度量方法包括基于样本加权的度量方法，基于假设检验的度量方法和基于各种度量函数的度量方法等",
                "comment": "数据分布较为均衡"
              }
            ]
          },
          {
            "id": 13,
            "name": "全面性",
            "description": "规模属性的子项，评估数据的领域和主题覆盖范围",
            "weight": 0.06,
            "weightedScore": 0.09,
            "children": [
              {
                "id": 39,
                "name": "数据领域",
                "description": "数据集是否涵盖了各个应用领域",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.045,
                "scoringMethod": "01法",
                "scoringStandard": "数据集覆盖多个应用领域1分，若无0分",
                "comment": "覆盖多个应用领域"
              },
              {
                "id": 40,
                "name": "数据主题",
                "description": "数据集是否提供了各个业务主题的数据内容",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.045,
                "scoringMethod": "01法",
                "scoringStandard": "数据集提供多个业务主题1分，若无0分",
                "comment": "包含多个业务主题"
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "价值属性",
        "description": "数据集应用于具体场景产生的价值",
        "weight": 0.25,
        "weightedScore": 0.47675,
        "children": [
          {
            "id": 14,
            "name": "效用性",
            "description": "价值属性的子项，评估数据的易用性和可理解性",
            "weight": 0.08,
            "weightedScore": 0.156,
            "children": [
              {
                "id": 41,
                "name": "易用性",
                "description": "数据集可供用户使用的程度度量",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.06,
                "scoringMethod": "01法",
                "scoringStandard": "数据集主题分类科学合理、主题无交叉为1分，分类模糊0分",
                "comment": "数据分类科学合理"
              },
              {
                "id": 42,
                "name": "可理解性",
                "description": "被使用者理解的程度",
                "weight": 0.03,
                "score": 100,
                "weightedScore": 0.06,
                "scoringMethod": "01法",
                "scoringStandard": "数据集有无相关简介或者解释说明",
                "comment": "提供了完整的使用说明文档"
              },
              {
                "id": 43,
                "name": "可访问性",
                "description": "数据在需要应用时的可获取性",
                "weight": 0.02,
                "score": 90,
                "weightedScore": 0.036,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据在需要时是否方便获取",
                "comment": "数据访问便捷性良好"
              }
            ]
          },
          {
            "id": 15,
            "name": "经济性",
            "description": "价值属性的子项，评估数据集的经济效益",
            "weight": 0.07,
            "weightedScore": 0.1015,
            "children": [
              {
                "id": 44,
                "name": "市场收益",
                "description": "数据集在应用场景中产生的收益度量",
                "weight": 0.04,
                "score": 85,
                "weightedScore": 0.0595,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据集在收集、治理和应用中是否产生损耗以及产生的成本",
                "comment": "市场收益表现良好"
              },
              {
                "id": 45,
                "name": "适配成本",
                "description": "数据集在应用场景中产生的成本度量",
                "weight": 0.03,
                "score": 80,
                "weightedScore": 0.042,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据集在收集、治理和应用中是否能够带来收益",
                "comment": "适配成本在合理范围内"
              }
            ]
          },
          {
            "id": 16,
            "name": "场景性",
            "description": "价值属性的子项，评估数据集的场景适配性",
            "weight": 0.1,
            "weightedScore": 0.21925,
            "children": [
              {
                "id": 46,
                "name": "场景多元性",
                "description": "数据集应用于单一场景还是多场景",
                "weight": 0.03,
                "score": 90,
                "weightedScore": 0.0675,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据集跨场景应用的可能性",
                "comment": "具有较好的场景多元性"
              },
              {
                "id": 47,
                "name": "业务适应性",
                "description": "数据集适用于不同业务场景和需求的能力度量",
                "weight": 0.03,
                "score": 85,
                "weightedScore": 0.06375,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据在场景应用中的适应程度",
                "comment": "业务适应性良好"
              },
              {
                "id": 48,
                "name": "应用可行性",
                "description": "数据在实际业务场景中的应用效果",
                "weight": 0.04,
                "score": 88,
                "weightedScore": 0.088,
                "scoringMethod": "专家打分法",
                "scoringStandard": "数据在实际业务场景中的应用效果",
                "comment": "实际应用效果良好"
              }
            ]
          }
        ]
      }
    ]
  }
};
        if (response.code === 200) {
          this.datasetId = response.data.datasetId;
          this.datasetName = response.data.datasetName;
          this.totalScore = response.data.totalScore;
          this.scoreTime = response.data.scoreTime;
          this.levelOneScores = response.data.levelOneScores;
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<style scoped lang="scss">
.dataset-score-container {
  max-width: 1400px;
  margin: 0 auto;
}

.score-card {
  transition: all 0.3s ease;
}

.score-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.score-badge {
  font-weight: 600;
}

.indicator-item {
  transition: background-color 0.2s ease;
}

.indicator-item:hover {
  background-color: #f8fafc;
}
</style>
